<template>
  <el-row :gutter="10">
    <el-col :span="16">
      <el-card>
        <template #header>
          <el-link>
            <el-icon size="40" color="#409eff">
              <Histogram/>
            </el-icon>
            数据统计
          </el-link>
        </template>
        <el-row>
          <el-col :span="8">
            <el-space wrap class="list-item">
              <div class="icon-round">
                <el-icon size="30" color="white">
                  <component is="IconUser"></component>
                </el-icon>
              </div>
              <div>
                <el-statistic title="读者数/人" :value="readerCountValue"/>
              </div>
            </el-space>
          </el-col>
          <el-col :span="8">
            <el-space wrap class="list-item">
              <div class="icon-round">
                <el-icon size="30" color="white">
                  <component is="IconBook"></component>
                </el-icon>
              </div>
              <div>
                <el-statistic title="收纳书籍/册" :value="bookCountValue"/>
              </div>
            </el-space>
          </el-col>
          <el-col :span="8">
            <el-space wrap class="list-item">
              <div class="icon-round">
                <el-icon size="30" color="white">
                  <component is="IconOnlineUser"></component>
                </el-icon>
              </div>
              <div>
                <el-statistic title="在线用户/人" :value="onlineCount"/>
              </div>
            </el-space>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <el-icon size="24" color="#409eff"><IconVisualization /></el-icon>
            <span class="header-title">借阅统计</span>
          </div>
        </template>
        <el-radio-group
            v-model="timeRange"
            @change="getBorrowStatic"
            class="time-buttons"
        >
          <el-radio-button value="7d">7天</el-radio-button>
          <el-radio-button value="30d">30天</el-radio-button>
          <el-radio-button value="6m">6个月</el-radio-button>
          <el-radio-button value="1y">1年</el-radio-button>
        </el-radio-group>
        <my-e-chart class="chart-container" :option="option" v-if="option.series[0].data.length>0" />
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card>
        <template #header>
          <el-link>
            <el-icon size="40" color="#1aa094">
              <Menu/>
            </el-icon>
            快捷菜单
          </el-link>
        </template>
        <el-space wrap>
          <div class="quick-menu">
            <el-link style="text-align: center" @click="goBorrow">
              <el-icon size="40" color="#409eff">
                <component is="IconBorrow"></component>
              </el-icon>
              <el-text>图书借阅</el-text>
            </el-link>
          </div>
          <div class="quick-menu">
            <el-link style="text-align: center" target="_self" href="/layout/borrow/list">
              <el-icon size="40" color="#409eff">
                <component is="IconReturn"></component>
              </el-icon>
              <el-text>图书归还</el-text>
            </el-link>
          </div>
          <div class="quick-menu">
            <el-link style="text-align: center" target="_self" href="/layout/person/center">
              <el-icon size="40" color="#409eff">
                <component is="IconUser"></component>
              </el-icon>
              <el-text>用户中心</el-text>
            </el-link>
          </div>
        </el-space>
      </el-card>
      <el-card v-loading="readingStartLoading" style="margin-top: 20px">
        <template #header>
          <h3>
            本周阅读之星
          </h3>
        </template>
        <my-e-chart :option="readingStarOption" style="height: 300px;width: 100%" v-if="readingStarOption"></my-e-chart>
        <el-empty v-if="readingStarEmpty" description="本周无人阅读"></el-empty>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import MyEChart from '@/components/echart/MyEChart.vue'
import {onMounted, reactive, ref} from 'vue'
import {useTransition} from '@vueuse/core'
import {useRouter} from "vue-router";
import {reqGetReaderCount} from "@/api/reader/index.js";
import {reqGetBookCount} from "@/api/book/index.js";
import {reqGetOnlineCount} from '@/api/system/user.js'
import {reqGetBorrowRecordStaticByTimeRange, reqGetReadingStar} from "@/api/borrow-record/index.js";

const bookCount = ref(0)
const router = useRouter()
const readerCount = ref(0)
const timeRange = ref('7d')
let onlineCount = ref(0)
let option = ref({
  tooltip: {trigger: 'axis'},
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {type: 'value'},
  series: [{
    name: '借阅量',
    type: 'bar',
    data: [],
    itemStyle: {
      color: '#409EFF'
    }
  }]
})
let readingStarEmpty = ref(false)
let readingStarOption = ref(null)
let readingStartLoading = ref(true)
const bookCountValue = useTransition(bookCount, {
  duration: 1500,
})
const readerCountValue = useTransition(readerCount, {
  duration: 1500,
})

let goBorrow = () => {
  router.push('/layout/borrow/borrow-book')
}

let getOnlineCount = async () => {
  let res = await reqGetOnlineCount()
  onlineCount.value = res.data
}
let getBorrowStatic = async () => {
  let res = await reqGetBorrowRecordStaticByTimeRange(timeRange.value)
  let data = res.data
  option.value.xAxis.data = data.xaxisData
  option.value.series[0].data = data.seriesData
}
let getReadingStar = async () => {
  let res = await reqGetReadingStar()
  if (res.data.length > 0) {
    readingStarOption.value = {
      title: {
        text: '阅读之星'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: res.data.map(item => item.name)
      },
      series: [
        {
          name: '本周阅读数',
          type: 'bar',
          data: res.data.map(item => item.readCount)
        },
      ]
    }
  } else readingStarEmpty.value = true
  readingStartLoading.value = false
}

onMounted(() => {
  reqGetReaderCount().then(res => {
    readerCount.value = res.data
  })
  reqGetBookCount().then(res => {
    bookCount.value = res.data
  })
  getBorrowStatic()
  getReadingStar()
  getOnlineCount()
})
</script>

<style scoped>
.list-item {
  background-color: #f1f1f3;
  padding: 10px;
}

.quick-menu {
  background-color: gainsboro;
  padding: 10px;
}

.icon-round {
  background: #409EFF;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-container{
  height: 300px;
}
</style>
